<template>
  <view class="antenna-modal">
    <up-popup v-model:show="show" overlay mode="bottom" touchable maxHeight="'80%'" closeable closeOnClickOverlay
      @close="close" @open="open">
      <view class="modal-content">
        <view class="modal-header">
          <view class="modal-title">{{ title }}</view>
        </view>
        <up-form labelPosition="left" :model="formModel" :rules="rules" ref="formRef">
          <up-form-item label="SN码" labelWidth="200rpx" prop="serialNo">
            <up-input v-model="formModel.serialNo" placeholder="请输入设备SN码" />
          </up-form-item>
          <up-form-item label="设备厂商" labelWidth="200rpx" prop="manufacturer">
            <up-select v-model="formModel.manufacturer" placeholder="请选择设备厂商" :options="manufacturerOptions" />
          </up-form-item>
          <up-form-item label="所属区域" labelWidth="200rpx" prop="area">
            <up-select v-model="formModel.area" placeholder="请选择所属区域" :options="areaOptions" />
          </up-form-item>
          <up-form-item label="安装位置" labelWidth="200rpx" prop="location">
            <up-input v-model="formModel.location" placeholder="请输入安装位置" />
          </up-form-item>
          <up-form-item label="IP地址" labelWidth="200rpx" prop="ipAddress">
            <up-input v-model="formModel.ipAddress" placeholder="请输入IP地址" />
          </up-form-item>
          <up-form-item label="MAC地址" labelWidth="200rpx" prop="macAddress">
            <up-input v-model="formModel.macAddress" placeholder="请输入MAC地址" />
          </up-form-item>
          <up-form-item label="通信协议" labelWidth="200rpx" prop="protocol">
            <up-select v-model="formModel.protocol" placeholder="请选择通信协议" :options="protocolOptions" />
          </up-form-item>
          <up-form-item label="备注" labelWidth="200rpx">
            <up-textarea v-model="formModel.remark" placeholder="请输入备注信息" />
          </up-form-item>
        </up-form>
      </view>

      <view class="modal-footer">
        <up-button type="primary" @click="submit">确认</up-button>
      </view>
    </up-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';

defineOptions({ name: "AntennaModal" });

const formRef = ref(null);
const props = defineProps({
  type: {
    type: String,
    default: 'add',
  },
  rowData: {
    type: Object,
    default: () => { },
  }
});

// 定义事件
const emit = defineEmits(['refresh']);

// 创建响应式数据  
const show = defineModel<boolean>("show", { default: false });

// 厂商选项
const manufacturerOptions = ref([
  {
    id: '0',
    name: '杭州海康',
  },
  {
    id: '1',
    name: '深圳华为',
  },
  {
    id: '2',
    name: '北京中电',
  },
  {
    id: '3',
    name: '上海大华',
  },
  {
    id: '4',
    name: '广州智能',
  },
]);

// 区域选项
const areaOptions = ref([
  {
    id: '0',
    name: '大良镇',
  },
  {
    id: '1',
    name: '顺德佛山',
  },
  {
    id: '2',
    name: '容桂镇',
  },
  {
    id: '3',
    name: '杏坛镇',
  },
  {
    id: '4',
    name: '伦教街道',
  },
  {
    id: '5',
    name: '勒流镇',
  },
  {
    id: '6',
    name: '陈村镇',
  },
  {
    id: '7',
    name: '均安镇',
  },
]);

// 通信协议选项
const protocolOptions = ref([
  {
    id: '0',
    name: 'HTTP',
  },
  {
    id: '1',
    name: 'MQTT',
  },
  {
    id: '2',
    name: 'TCP/IP',
  },
]);

// 表单数据模型
const formModel = ref(createDefaultModel());

/**
 * 初始化表单数据
 */
function createDefaultModel() {
  return {
    serialNo: '',
    manufacturer: '',
    area: '',
    location: '',
    ipAddress: '',
    macAddress: '',
    protocol: '',
    remark: '',
  };
}

// 表单验证规则
const rules = reactive({
  serialNo: [{ required: true, message: '请输入设备SN码', trigger: 'blur' }],
  manufacturer: [{ required: true, message: '请选择设备厂商', trigger: 'blur' }],
  area: [{ required: true, message: '请选择所属区域', trigger: 'blur' }],
  location: [{ required: true, message: '请输入安装位置', trigger: 'blur' }],
  ipAddress: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
  macAddress: [{ required: true, message: '请输入MAC地址', trigger: 'blur' }],
  protocol: [{ required: true, message: '请选择通信协议', trigger: 'blur' }],
});

// 初始化表单数据
function handleInitModel() {
  formModel.value = createDefaultModel();
  if (!props.rowData) return;
  if (props.type === "edit") {
    // 编辑模式下，填充表单数据
    Object.assign(formModel.value, {
      serialNo: props.rowData.serialNo || '',
      manufacturer: props.rowData.manufacturer || '',
      area: props.rowData.area || '',
      location: props.rowData.location || '',
      ipAddress: props.rowData.ipAddress || '',
      macAddress: props.rowData.macAddress || '',
      protocol: props.rowData.protocol || '',
      remark: props.rowData.remark || '',
    });
  }
}

// 计算标题
const title = computed(() => {
  const titles = {
    add: "新增ETC天线设备",
    edit: "编辑ETC天线设备",
  };
  return titles[props.type] || "设备信息";
});

// 提交表单
const submit = async () => {
  try {
    await formRef.value.validate();
    
    // 模拟提交操作
    console.log('提交数据:', formModel.value);
    
    // 显示成功提示
    uni.showToast({
      title: props.type === 'add' ? '添加成功' : '更新成功',
      icon: 'success'
    });
    
    // 关闭弹窗
    show.value = false;
    
    // 通知父组件刷新列表
    emit('refresh');
  } catch (error) {
    console.error('表单验证失败', error);
  }
};

// 打开弹窗
function open() {
  show.value = true;
  handleInitModel();
  formRef.value && formRef.value.resetFields();
}

// 关闭弹窗
function close() {
  show.value = false;
}
</script>

<style scoped lang="scss">
.antenna-modal {
  .modal-header {
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    padding: 20rpx 0;
  }

  .modal-content {
    padding: 20rpx;
  }

  .modal-footer {
    padding: 20rpx;
    display: flex;
    justify-content: center;
  }
}
</style>